<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
    <link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
    <link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
    <title>编辑收货地址</title>
    <script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
    <script src="<%=basePath%>assets/js/fontSize.js"></script>
    <script type="text/javascript" src="<%=basePath%>assets/js/selectordie.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>assets/css/selectordie.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/selectordie_theme_01.css">
    <link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
    <script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<%--     <link rel="stylesheet" href="<%=basePath%>assets/address/lArea.css"> --%>
<%--     <script src="<%=basePath%>assets/address/lArea.js"></script> --%>
        
    <link rel="stylesheet" href="<%=basePath%>assets/address2/LArea.css">
    <script src="<%=basePath%>assets/address2/LAreaData1.js"></script>
	<script src="<%=basePath%>assets/address2/LAreaData2.js"></script>
	<script src="<%=basePath%>assets/address2/LArea.js"></script>
	
    <script>
        $(function () {
            $('select').selectOrDie();
        });
    </script>
    <style>
        body {
            padding-top: 0.8rem;
        }

        .content span {
            width: 100%;
            height: 0.8rem;
            line-height: 0.8rem;
            text-indent: 0.2rem;
            font-size: 0.24rem;
            display: block;
        }

        .content span label {
            color: #888;
        }

        .content textarea {
            vertical-align: top;
            min-height: 1rem;
            line-height: 0.3rem;
            border: none;
            outline: none;
            padding-top: 0.3rem;
        }

        .baocun {
            width: 100%;
            background: #FF3F25;
            height: 0.8rem;
            line-height: 0.8rem;
            display: block;
            font-size: 0.3rem;
            color: #fff;
            text-align: center;
            margin-top: 0.2rem;
            border-radius: 0.4rem;
        }

        .xzshengshixian {
            width: 100%;
            padding: 0.1rem 0;
            display: none
        }

        .xzshengshixian select {
            width: 30%;
            height: 0.8rem;
            line-height: 0.8rem;
        }
        .label_title {
            width: 30%;
        }

        .input_content {
            width: 70%;
        }
    </style>
    <script>
        $(function () {
            $('.shengshixian').click(function () {
                $('.xzshengshixian').slideDown();
            })
            $('.xzshengshixian').find('.baocun').click(function () {
                $('.xzshengshixian').slideUp();
            })
            $("#showSelect").show();
        });
    </script>

</head>
<body>
<input id="basePath" type="hidden" value="<%=basePath%>">
<div class="header">
    <a class="returnInfo" href="#" onclick="window.history.go(-1)"><i class="fa fa-angle-left"></i></a>
    <h3>编辑收货地址</h3>
</div>
<div class="content">
		<span class="border-bottom-1">
			<label for="userName" class="label_title">收货人：</label>
			<input class="input_content" id="userName" type="text" placeholder="请输入收货人姓名" value="${address.userName}">
		</span>
    <span class="border-bottom-1">
			<label for="userPhone" class="label_title">手机号：</label>
			<input class="input_content" id="userPhone" type="text" placeholder="请输入手机号码" value="${address.userPhone}">
		</span>
    <span class="border-bottom-1">
			<label for="provinceCityCounty" class="label_title">收货地址：</label>
			<input class="input_content" id="provinceCityCounty" type="text" placeholder="省、市、县" class="shengshixian" readonly="">
		</span>
    <span style="min-height: 1.6rem;">
			<label for="address" class="label_title">详细地址：</label>
			<textarea class="input_content" id="address" placeholder="请在此输入详细地址">${address.address}</textarea>
		</span>
    <a href="javascript:;" class="baocun">修改</a>
</div>
</body>
<script type="text/javascript">
    $(function () {
        //选中下拉值
        var province = '${address.province}';
        var city = '${address.city}';
        var county = '${address.county}';
        $("#provinceCityCounty").val(province + " " + city + " " + county)

        //修改地址
        $(".baocun")
            .click(
                function () {
                    var userName = $("#userName").val();
                    var userPhone = $("#userPhone").val();
                    var address = $("#address").val();
                    var addressId = '${address.addressId}';
                    var arr = $("#provinceCityCounty").val().split(" ");
                    if (userName == null || userName == '') {
                        layer.open({
                            content: '收货人姓名不能为空',
                            skin: 'msg',
                            time: 2
                            //2秒后自动关闭
                        });
                        return false;
                    } else if (userPhone == null || userPhone == '') {
                        layer.open({
                            content: '手机号码不能为空',
                            skin: 'msg',
                            time: 2
                            //2秒后自动关闭
                        });
                        return false;
                    } else if (userPhone
                            .match(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/) == null) {
                        layer.open({
                            content: '请输入合法的电话号码',
                            skin: 'msg',
                            time: 2
                            //2秒后自动关闭
                        });
                        return false;
                    } else if (address == null || address == '') {
                        layer.open({
                            content: '详细地址不能为空',
                            skin: 'msg',
                            time: 2
                            //2秒后自动关闭
                        });
                        return false;
                    } else {
                        $.ajax({
                            url: $("#basePath").val()
                            + "app/updateAddress",
                            dataType: "json",
                            type: "post",
                            data: {
                                "userName": userName,
                                "userPhone": userPhone,
                                "province": arr[0],
                                "city": arr[1],
                                "county": arr[2],
                                "addressId": addressId,
                                "address": address
                            },
                            success: function (data) {
                                if (data.state == 1) {
                                    // 			        	  	layer.open({
                                    // 			      			    content: '修改地址成功了'
                                    // 			      			    ,skin: 'msg'
                                    // 			      			    ,time: 2 //2秒后自动关闭
                                    // 		      			  	});
                                    window.location.href = $(
                                            "#basePath").val()
                                        + "app/getAddressList";
                                } else {
                                    layer.open({
                                        content: '修改地址失败了',
                                        skin: 'msg',
                                        time: 2
                                        //2秒后自动关闭
                                    });
                                }
                            },
                            error: function () {

                            }
                        });
                    }
                });

//         var area = new lArea();
//         area.init({
//             'trigger': '#provinceCityCounty',
//             'data': lAreaData
//             //'js/AreaData.json'
//         });
	        var area1 = new LArea();
	        area1.init({
	        	'trigger': '#provinceCityCounty', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
	        	'keys': {
	        		id: 'id',
	        		name: 'name'
	        	}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
	        	'type': 1, //数据源类型
	        	'data': LAreaData //数据源
	        });
    })
</script>
</html>